<template>
  <div class="box">
    <div class="u-title">我的动态（{{evenyLength}}）</div>
    <ul class="m-dlist">
      <li
        v-for="(item,index) in eventinfo"
        :key="index"
      >
        <div class="gface">
          <a href="#">
            <img v-lazy="item.user.avatarUrl">
          </a>
        </div>
        <div class="gcnt">
          <div class="type">
            <a href="#">{{item.user.nickname}}</a>
            <span v-if="item.type===18">分享单曲</span>
            <span v-else-if="item.type===19">分享专辑</span>
            <span v-else-if="item.type===17">分享节目</span>
            <span v-else-if="item.type===22">转发</span>
            <span v-else-if="item.type===39">发布视频</span>
            <span v-else-if="item.type===13">分享歌单</span>
            <span v-else-if="item.type===24">分享专栏文章</span>
            <span v-else>分享视频</span>
          </div>
          <div class="time">{{item.eventTime | dateFormat}}</div>
          <div class="text">{{item.json.msg}}</div>
          <div
            class="j-flag"
            v-if="item.type===17"
          >
            <div class="left">
              <a href="#">
                <!-- 这三个  每个json对象的属性名都不一样 -->
                <!-- 1 -->
                <img v-lazy="item.json.program.coverUrl">
              </a>
            </div>
            <div class="right">
              <!-- 2 -->
              <p class="fir"><a href="#">{{item.json.program.name}}</a></p>
              <!-- 3 -->
              <p class="sec"><a href="#">{{item.json.program.radio.name}}</a></p>
            </div>
          </div>
          <div
            class="j-flag"
            v-else-if="item.type===13"
          >
            <div class="left">
              <a href="#">
                <img v-lazy="item.json.playlist.coverImgUrl">
              </a>
            </div>
            <div class="right">
              <p class="fir"><a href="#">{{item.json.playlist.name}}</a></p>
              <p class="sec"><a href="#">by{{item.json.playlist.creator.nickname}}</a></p>
            </div>
          </div>
          <div
            class="j-flag"
            v-else-if="item.type===18"
          >
            <div class="left">
              <a href="#">
                <img v-lazy="item.json.song.img80x80">
              </a>
            </div>
            <div class="right">
              <p class="fir"><a href="#">{{item.json.song.name}}</a></p>
              <p class="sec"><a href="#">{{item.json.song.artists[0].name}}</a></p>
            </div>
          </div>
          <!-- 专辑 -->
          <div
            class="j-flag"
            v-else-if="item.type===19"
          >
            <div class="left">
              <a href="#">
                <img v-lazy="item.json.album.img80x80">
              </a>
            </div>
            <div class="right">
              <p class="fir"><a href="#">{{item.json.album.name}}</a></p>
              <p class="sec"><a href="#">{{item.json.album.artists[0].name}}</a></p>
            </div>
          </div>
          <!-- MV -->
          <div
            class="j-flagmv"
            v-else-if="item.type===21"
          >
            <div class="mvbtm">
              <p class="up">
                <i class="iconfont icon-MV"></i>
                <span class="mvname">{{item.json.mv.name}}</span>
                <span class="ahname">-{{item.json.mv.artistName}}</span>
              </p>
              <p class="btm">
                <i class="iconfont icon-bofang1"></i>
                <span class="playcount">{{item.json.mv.playCount}}</span>
              </p>
              <i class="iconfont icon-bofang"></i>
              <a href="#">
                <img v-lazy="item.json.mv.imgurl16v9">
              </a>
            </div>
          </div>
          <div class="doper">
            <a
              href="#"
              class="iconfont icon-zan"
            ></a>
            <span>|</span>
            <a href="#">转发</a>
            <span>|</span>
            <a href="#">评论</a>
          </div>
          <div class="arrow iconfont icon-down">
            <a href="#">
              <i class="iconfont icon-lajitong"></i>
              删除
            </a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      uid: 0,
      eventinfo: [
        {
          json: {
            program: {
              coverUrl: '',
              name: '',
              radios: {
                name: ''
              }
            },
            evenyLength: 0
          }
        }
      ]
    }
  },
  created () {
    this.getEvent();
  },
  methods: {
    async getEvent () {
      this.uid = this.$route.query.id
      // console.log('EVENT页面用户id：', this.uid)
      let res = await axios.get('https://autumnfish.cn//user/event?uid=' + this.uid)
      this.eventinfo = res.data.events
      for (let i = 0; i < res.data.size; i++) {
        this.eventinfo[i].json = JSON.parse(this.eventinfo[i].json)
      }
      this.evenyLength = this.eventinfo.length
      // console.log(this.eventinfo)
    }
  }
}
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
}
p {
  margin: 0;
  padding: 0;
}
.u-title {
  border-bottom: 2px solid #c20c0c;
  height: 33px;
  font-size: 20px;
  line-height: 28px;
}
.m-dlist {
  li {
    list-style: none;
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e9;
    position: relative;
    .gface {
      position: absolute;
      top: 20px;
      left: 0;
      width: 54px;
      a {
        float: left;
        position: relative;
        zoom: 1;
        width: 45px;
        height: 45px;
        img {
          display: block;
          width: 100%;
        }
      }
    }
    .gcnt {
      margin-left: 55px;
      padding-top: 4px;
      position: relative;
      .type {
        a {
          color: #0c73c2;
          text-decoration: none;
          font-size: 14px;
        }
        a:hover {
          text-decoration: underline;
        }
        span {
          margin-left: 5px;
          color: #666;
          font-size: 12px;
        }
      }
      .time {
        margin-top: 7px;
        color: #666;
        font-size: 12px;
      }
      .text {
        margin-top: 10px;
        line-height: 24px;
        font-size: 14px;
        word-break: break-word;
      }
      .j-flag {
        background: #f5f5f5;
        padding: 10px;
        margin: 4px 0 5px;
        position: relative;
        height: 40px;

        .left {
          position: absolute;
          a {
            display: block;
            width: 40px;
            height: 40px;
            img {
              width: 100%;
            }
          }
        }
        .right {
          position: absolute;
          top: 10px;
          left: 60px;
          right: 30px;
          height: 40px;
          line-height: 22px;
          .fir {
            a {
              color: #333;
              font-size: 14px;
            }
          }
          .sec {
            a {
              color: #666;
              font-size: 12px;
            }
          }
          a:hover {
            text-decoration: underline;
          }
        }
      }
      .j-flagmv {
        padding: 10px;
        padding-left: 10px !important;
        margin: 4px 0;
        height: 189px;
        .mvbtm {
          width: 338px;
          height: 189px;
          margin: 4px 0 5px;
          position: relative;
          .up {
            position: absolute;
            top: 5px;
            left: 5px;
            .iconfont {
              position: absolute;
              top: 0;
              left: 0;
              margin-right: 4px;
              font-size: 25px;
              color: #b9b2b5;
              opacity: 0.8;
            }
            .mvname {
              word-wrap: break-word;
              word-break: break-all;
              font-size: 12px;
              color: #fff;
              margin-left: 27px;
            }
            .ahname {
              color: #666;
              font-size: 12px;
            }
          }
          .btm {
            position: absolute;
            bottom: 6px;
            left: 10px;
            color: #fff;
            font-size: 12px;
            .iconfont {
              margin-right: 4px;
            }
          }
          .icon-bofang {
            position: absolute;
            top: 70px;
            left: 145px;
            font-size: 45px;
            color: #b9b2b5;
            opacity: 0.8;
          }
          a {
            display: block;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .doper {
        margin: 18px 0 -2px;
        text-align: right;
        line-height: normal;
        a {
          color: #0c73c2;
          font-size: 12px;
          cursor: pointer;
        }
        span {
          color: #c7c7c7;
          margin: 0 10px 0 12px;
        }
      }
      .arrow {
        position: absolute;
        font-size: 12px;
        color: #666;
        right: 0;
        top: 0;
        a {
          display: block;
          color: #666;
          width: 105px;
          height: 30px;
          overflow: hidden;
          line-height: 31px;
          border: 1px solid #666;
          border-radius: 4px;
          position: absolute;
          left: -96px;
          top: 10px;
          display: none;
          i {
            width: 16px;
            height: 16px;
            margin: 7px 8px 0 9px;
          }
        }
      }
    }
  }
}
</style>
